<!-- 
    说明： 职位列表页面
 -->
 <template>
    <el-dialog
        title="预览"
        :visible.sync="visible"
        width="80%"
        append-to-body
        custom-class="project-preview-pop"
        :before-close="handleClose"
    >
        <section class="page" v-if="info">
            <div class="main">

                <div class="row-item">
                    <span class="row-title">项目名称：</span>
                    <span>{{ info.title }}</span>
                </div>

                <div class="row-item">
                    <span class="row-title">项目类型：</span>
                    <span>{{ entryTypeStr[info.entryType] || "--" }}</span>
                </div>

                <div class="row-item flex-top">
                    <span class="row-title">举办单位：</span>
                    <img
                        class="hold-unit-url"
                        v-if="info.holdUnitUrl"
                        :src="info.holdUnitUrl"
                        alt="举办单位"
                        srcset=""
                        v-imgError
                    />
                </div>

                <div class="row-item flex-top">
                    <span class="row-title">项目说明：</span>
                    <div
                        v-if="info.projectDescription"
                        class="description"
                        v-html="info.projectDescription"
                    ></div>
                </div>

                <div class="row-item">
                    <div>
                        <span class="row-title">参赛类型：</span>
                        <span class="right">
                            {{ entryTypeStr[info.entryType] || "--" }}
                        </span>
                        <div style="padding-left: 100px;margin-top: 10px;">
                            <span v-if="info.entryType && Number(info.entryType) !== 1">团队最大人数限制：</span>
                            <span v-if="info.entryType && Number(info.entryType) !== 1" >{{ info.itemPeopleNum }}</span>
                        </div>
                    </div>
                </div>

                <div class="row-item flex-top">
                    <span class="row-title">赛程安排：</span>
                    <diV class="right" v-if="info && info.scheduleVOList && info.scheduleVOList.length > 0">
                        <div
                            class="time-row"
                            v-for="(item, index) in info.scheduleVOList"
                        >
                            <div v-if="item.scheduleType === 1">
                                遴选时间：{{ item.startTime || "--" }} ～
                                {{ item.endTime || "--" }}
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                作品截止上传时间：{{
                                    item.closingDate || "--"
                                }}
                            </div>
                            <div v-if="item.scheduleType === 2">
                                初赛时间：{{ item.startTime || "--" }} ～
                                {{ item.endTime || "--" }}
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                作品截止上传时间：{{
                                    item.closingDate || "--"
                                }}
                            </div>
                            <div v-if="item.scheduleType === 3">
                                复赛时间：{{ item.startTime || "--" }} ～
                                {{ item.endTime || "--" }}
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                作品截止上传时间：{{
                                    item.closingDate || "--"
                                }}
                            </div>
                            <div v-if="item.scheduleType === 4">
                                决赛时间：{{ item.startTime || "--" }} ～
                                {{ item.endTime || "--" }}
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                作品截止上传时间：{{
                                    item.closingDate || "--"
                                }}
                            </div>
                        </div>
                    </diV>
                </div>

                <div class="row-item flex-top">
                    <span class="row-title">参赛须知：</span>
                    <div
                        v-if="info.entryInformation"
                        class="description"
                        v-html="info.entryInformation"
                    ></div>
                </div>

                <div class="row-item flex-top">
                    <span class="row-title">比赛规则：</span>
                    <div
                        v-if="info.competitionRules"
                        class="description"
                        v-html="info.competitionRules"
                    ></div>
                </div>

                <div class="row-item flex-top">
                    <span class="row-title">评选办法：</span>
                    <div
                        v-if="info.reviewRules"
                        class="description"
                        v-html="info.reviewRules"
                    ></div>
                </div>

                <div class="row-item flex-top">
                    <span class="row-title">参赛要求：</span>
                    <div
                        v-if="info.entryRequire"
                        class="description"
                        v-html="info.entryRequire"
                    ></div>
                </div>

                <div class="row-item flex-top">
                    <span class="row-title">项目奖励：</span>
                    <div
                        v-if="info.projectRewards"
                        class="description"
                        v-html="info.projectRewards"
                    ></div>
                </div>

                <div class="row-item flex-top" v-if="info.videoUrl">
                    <span class="row-title">视频介绍：</span>
                    <VideoPlayer style="width: 500px;" :autoplay="false" :src="info.videoUrl"></VideoPlayer>
                </div>

                <div class="row-item flex-top">
                    <span class="row-title">大赛组织：</span>
                    <div v-html="info.competitionOrganization"></div>
                </div>

                <div class="row-item flex-top">
                    <span class="row-title">比赛材料：</span>
                    <diV class="right">
                        <div class="table-view">
                            <el-row>
                                <el-col :span="6">
                                    <p class="text-col head">序号</p>
                                </el-col>
                                <el-col :span="12">
                                    <p class="text-col head">
                                        文件
                                    </p></el-col
                                >
                                <el-col :span="6">
                                    <p class="text-col head">
                                        操作
                                    </p></el-col
                                >
                            </el-row>
                            <el-row
                                v-for="(item, index) in info.annexVOList"
                                :key="index"
                            >
                                <el-col :span="6">
                                    <p class="text-col">{{ index + 1 }}</p>
                                </el-col>
                                <el-col :span="12">
                                    <el-tooltip
                                        class="item"
                                        effect="dark"
                                        :content="item.annexName"
                                        placement="top"
                                    >
                                        <p class="text-col cursor-pointer">
                                            {{ item.annexName }}
                                        </p>
                                    </el-tooltip>
                                </el-col>
                                <el-col :span="6">
                                    <p
                                        :class="[
                                            'text-col',
                                            'href-link',
                                            { 'no-download': !canDown },
                                        ]"
                                        @click="openDownLoad(item)"
                                    >
                                        下载
                                    </p></el-col
                                >
                            </el-row>
                        </div>
                    </diV>
                </div>
            </div>
        </section>
    </el-dialog>
</template>
  
  <script>
    import VideoPlayer from '@/components/videoPlayer'
  import { createApi, getProDetail, editApi } from './../api';
  export default {
    // 组件名称
    name: "productDetail",
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件
    components: { VideoPlayer },
    // 组件状态值
    data() {
      return {
        visible: false,
        // 参赛类型;1:个人;2:团队;3:个人或团队; 注意 这里的1、2、3只在报名时有区分类型，在其他地方只有1=团队 2=个人
        entryTypeStr: {
          1: "个人",
          2: "团队",
          3: "个人或团队",
        },
        tipsList: {
          1004053023: "该手机号未注册",
          // 1004053024: "该队员未身份认证，请先认证",
          1004053024: "您未身份认证，请先完成身份认证",
          // 1004053025: "该队员已个人/团队报名，无法再次参加",
          1004053025: "您已个人/团队报名，无法再次参加",
        },
        id: "",
        studentInfo: {},
        info: null,
        // info: {
        //   id: "",
        //   title: "",
        //   projectTypeId: "",
        //   holdUnitUrl: "",
        //   holdUnitName: null,
        //   projectDescription: "",
        //   entryType: "",
        //   itemPeopleNum: "",
        //   entryInformation: "",
        //   competitionRules: "",
        //   reviewRules: "",
        //   reviewRequire: "",
        //   entryRequire: "",
        //   projectRewards: "",
        //   videoUrl: "",
        //   competitionOrganization: "",
        //   annexDownType: "",
        //   status: "",
        //   weight: "",
        //   releaseTime: null,
        //   examineFlag: "",
        //   examineStatus: "",
        //   examineNotes: "",
        //   submitTime: "",
        //   examinePeople: null,
        //   examineTime: "",
        //   scheduleType: "",
        //   projectTypeName: null,
        //   annexVOList: [],
        //   scheduleVOList: [],
        // },
        code: "",
        isJoined: false,
        isInNextStep: false, // 遴选入选
        canDown: true
      };
    },
    created() {
      
    },

    // 组件方法
    methods: {
        open({info}) {
            console.log(info, '----info---->>>')
            this.info = info;
            this.visible = true
        },
        handleClose() {
            this.visible = false
        },
      openDownLoad(item) {
          if (this.canDown) {
              window.open(item.annexUrl, "_blank");
          }
      },
      
    }
  };
  </script>
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style lang="scss" scoped>
  p {
    margin: 0;
  }
.project-preview-pop {
    position: relative;
    width: 100%;
    height: 100%;
    background: #f5f8fa;

    .main {
        padding: 0 25px;
        .row-item {
            display: flex;
            justify-content: start;
            align-items: center;
            font-size: 16px;
            margin-bottom: 20px;

            .row-title {
                color: #4677b9;
                display: inline-block;
                width: 100px;
                flex-shrink: 0;
            }

            .hold-unit-url {
                width: 200px;
            }

            .description {
                width: 80%;
            }

            .time-row {
                margin-bottom: 10px;
            }

            .table-view {
            width: 400px;
            background: #ffffff;
            border-top: 1px solid #d4d6da;
            border-left: 1px solid #d4d6da;
            .text-col {
              border-right: 1px solid #d4d6da;
              border-bottom: 1px solid #d4d6da;
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #9597a0;
              line-height: 40px;
              text-align: center;
              width: 100%;
              height: 40px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              padding: 0 5px;
            }
            .cursor-pointer {
              cursor: pointer;
            }
            .head {
              background: #f6f7f8;
            }
            .href-link {
              cursor: pointer;
              color: #3d6cb0;
            }
            .no-download {
                cursor: no-drop;
            }
          }
        }
        .flex-top {
            align-items: flex-start;
        }
    }
    
}
.el-button--primary {
    width: 64px;
    height: 40px;
    padding: 0;
    background: #4677b9;
    border-radius: 5px;
    font-size: 15px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    border: none;
}
</style>
<style lang="scss">
    .project-preview-pop {
        .video-player {
            position: relative !important;
        }
    }
</style>